<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="cache-control" content="no-cache" />
        <title>菜单列表</title>
        <link rel="stylesheet" href="../../assets/less/base/main.css" />
        <link rel="stylesheet" href="../../assets/less/menu/index.css" />
    </head>

    <body>
        <div id="app">
            <!-- 菜单 -->
            <div class="iot-menu-list">
                <div class="menu-box" v-for="(item, index) in menuList" :key="index" @click="handleClick(item)">
                    <div class="menu-item" :class="checkMenu === item.id ? 'menu-active' : ''" :style="menuStyle">
                        <img :src="item.img" :title="item.name" />
                    </div>
                    <p>{{ item.name }}</p>
                </div>
            </div>
        </div>
        <script src="../../config.js"></script>
        <script src="../../assets/js/main.js" type="module"></script>
        <script src="../../assets/lib/md5.js"></script>
        <script type="module">
            // 创建Vue实例
            new Vue({
                el: '#app', // 绑定元素
                data: {
                    checkMenu: '',
                    toolBoxShow: true,
                    toolBoxStyle: {
                        top: '0px',
                        left: '0px'
                    },
                    // 大屏code
                    pageScreenCode: '',
                    menuStyle: {
                        width: document.body.scrollHeight > 1050 ? '82px' : '72px'
                    },
                    // 定时器ID
                    refreshTimer: null,
                    menuList: [
                        {
                            id: 'overall',
                            name: '综合态势',
                            value: '/view/overall.html',
                            img: '../../assets/images/menu/overall.png',
                            GameHandle: '综合态势',
                            children: []
                        },
                        {
                            id: 'ringPage',
                            name: '动环态势',
                            value: '/view/ringview.html',
                            img: '../../assets/images/menu/donghuan.png',
                            GameHandle: '动环态势',
                            children: []
                        },
                        {
                            id: 'homePage',
                            name: '安防态势',
                            value: '/view/safe.html',
                            img: '../../assets/images/menu/video_safe.png',
                            children: [],
                            GameHandle: '安防态势'
                        }
                    ]
                },
                mounted() {
                    window.OnLoginSuccess = this.OnLoginSuccess
                    window.OnClickAnFangBuilding = this.OnClickAnFangBuilding

                    // 刷新token定时器
                    this.startTokenRefresh()
                },
                beforeDestroy() {
                    // 组件销毁前清除定时器
                    if (this.refreshTimer) {
                        clearTimeout(this.refreshTimer)
                        this.refreshTimer = null
                    }
                },
                methods: {
                    // 刷新token定时器
                    startTokenRefresh() {
                        let tokenExpire = this.getDateByDb('web_token_expire')
                        let tokenExpireNum = parseInt(tokenExpire)
                        let delay = 0
                        if (tokenExpireNum >= 59) {
                            delay = tokenExpireNum
                        } else {
                            // 定时十分钟刷新一次
                            delay = tokenExpireNum === 0 ? 600 : tokenExpireNum
                        }
                        console.log('token刷新间隔：' + delay + ',' + tokenExpireNum)
                        this.refreshTimer = setTimeout(() => {
                            this.fetchNewToken()
                        }, delay * 1000)
                    },
                    // 刷新token
                    fetchNewToken() {
                        this.startTokenRefresh()

                        let userName = this.getDateByDb('login_user_name')
                        let passWord = this.getDateByDb('login_user_pw')
                        if (!userName) {
                            console.log('userName为空退出')
                            return
                        }
                        let obj = {
                            username: userName,
                            password: passWord,
                            loginType: 0,
                            clientType: 0
                        }
                        webApi.accountLoginOld(obj).then(res => {
                            if (res.code === 0) {
                                let token = res.result ? res.result.token : ''
                                if (token) {
                                    Fuck(
                                        'func_db',
                                        null,
                                        'set',
                                        JSON.stringify({
                                            key: 'web_token',
                                            value: token
                                        })
                                    )
                                    console.error('刷新token成功,新token为'+token)
                                } else {
                                    console.error('刷新token失败,新token为空')
                                }
                            } else {
                                console.error('刷新token失败,' + res.msg)
                            }
                        })
                    },
                    // 这个方法在login下的foreground.html调用，登录完成后显示左菜单。然后默认选中首页态势
                    OnLoginSuccess() {
                        let homeMenu = this.menuList.find(x => x.id === 'overall')
                        homeMenu && this.handleClick(homeMenu)
                    },
                    // 点击了安防建筑,安防菜单调整为选中状态
                    OnClickAnFangBuilding() {
                        let menu = this.menuList.find(x => x.id === 'ringPage')
                        menu && this.handleClick(menu)
                    },
                    handleClick(row) {
                        let id = row ? row.id : ''

                        if (id && id !== this.checkMenu) {
                            this.checkMenu = id

                            // 1、通知3D切换作业状态,这个request 稍后会在OnEnterGameHandle作为参数传入
                            var request = undefined
                            if (row.GameHandle != undefined) {
                                request = {
                                    event: row.GameHandle,
                                    data: row
                                }
                            } else {
                                // 2、默认有个子状态（页面）有焦点，要通知一下主程序维护状态
                                if (row.children) {
                                    row.children.forEach(element => {
                                        if (element.isDefault && element.GameHandle != undefined) {
                                            request = {
                                                event: element.GameHandle,
                                                data: row
                                            }
                                        }
                                    })
                                }
                            }

                            console.log('JS开始进入作业事件:' + row)

                            //FuckPage("app", "OnEnterGameHandle", row);
                            Fuck('func_handle', null, 'branch', JSON.stringify(request))

                            // switch (id) {
                            //   case "homePage":
                            //     CameraGoto("惠州中科院_首页态势");
                            //     break;

                            //   case "ringPage":
                            //     CameraGoto("惠州中科院_默认视角");
                            //     break;
                            //     break;
                            // }
                        }
                    },
                    GetCurrentPage() {
                        var item = document.querySelector('.MenuNodeActive')
                        if (item == null) return false

                        return `惠州中科院_${item.textContent}`
                    },
                    // 从存储中获取数据
                    getDateByDb(str) {
                        return Fuck(
                            'func_db',
                            null,
                            'get',
                            JSON.stringify({
                                key: str,
                                default: ''
                            })
                        )
                    }
                }
            })
        </script>
    </body>
</html>
<script></script>
